fetch和XHR的区别 |
您所在的位置:网站首页 › fetch up › fetch和XHR的区别 |
fetch和XHR(XMLHttpRequest)分别是什么?
fetch和XHR都是是获取远端数据的方式。fetch是原生js方法,没有使用XMLHttpRequest对象,使用fetch可以不用引用http的类库即可实现。提供了一种简单,合理的方式来跨网络异步获取资源。XMLHttpRequest(XHR)是一个构造函数,对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL。即允许网页在不影响用户操作的情况下,更新页面的局部内容。可以用于获取任何类型的数据。
fetch的一些问题 1)fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。 2)fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'}) 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费 4)fetch没有办法用原生监测异步请求,而XHR可以 fetch同构方便,使用isomorphic-fetch .fetch 不管请求处理成功还是失败,都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。 XHR 和 Fetch 的使用详解和区别总结_陆小森_红齐飘飘的博客-CSDN博客 fetch和XHR的区别 1、调用方式不同用 XHR 发起一个GET请求 var xhr = new XHMHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); }; xhr.onerror = function(){ console.log('something wrong~ ╮( ̄▽ ̄)╭'); }; xhr.send();用 Fetch 完成同样的请求 fetch(url).then(function(response){ return response.json(); }).then(function(jsonData){ console.log(jsonData); }).catch(function(){ console.log('something wrong~ ╮( ̄▽ ̄)╭'); }); fetch和XHR请求有关的特性https://segmentfault.com/a/1190000010417624 二者的缺点1、fetch有兼容问题 两者的未来Fetch API未来基于 Fetch 和 Service Worker 的缓存和请求拦截技术。 fetch与XHR的区别与优势 - 左耳的风铃lal - 博客园 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |